<template>
	<div class="css">
		<h1>css</h1>
		<el-button type="primary" @click="goBack">返回</el-button>
		<el-button type="primary" @click="flag = 1">盒子水平垂直居中的几种方式</el-button>
		<el-button type="primary" @click="flag = 2">flex的使用</el-button>
		<el-button type="primary" @click="flag = 3">清除浮动</el-button>
		<!-- 水平垂直居中 -->
		<transition name="el-zoom-in-bottom" appear>
			<center v-show="flag == 1" />
		</transition>
		<transition name="el-zoom-in-bottom" appear>
			<flex v-show="flag == 2"></flex>
		</transition>
		<transition name="el-zoom-in-bottom" appear>
			<clearfix v-show="flag == 3"></clearfix>
		</transition>
	</div>
</template>

<script>
	import center from './center'
	import flex from './flex'
	import clearfix from './clearFix'
	export default {
		data() {
			return {
				key: 'value',
				flag: 1
			}
		},
		components: {
			center,
			flex,
			clearfix
		},
		methods: {
			goBack() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.css {
		padding: 20px 0;
	}
</style>
